<!-- ApplicationForTeaching.vue -->
<!-- 教学设备申请 -->
<template>
  <div class="theBox">
    
    <div class="contener boderSet">
      <!-- 面包屑 -->
    <div class="fen">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>教学设备借入申请</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
      <h3>教学设备借入申请记录</h3>
      <el-row class="paddingTop15">
        <el-col :span="3">
          <el-button type="primary">
            <router-link :to="{ path: '/borrow' }"
              class="link" >发起借入申请</router-link
            ></el-button
          >
        </el-col>
        <el-col :span="4">
          <el-input
            placeholder="申请人姓名"
            style="width: 200px"
            v-model="searchName"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="7.5">
          <div class="block">
            <span class="demonstration">申请时间：</span>
            <el-date-picker
              v-model="searchTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="switchHowerborrow">查询</el-button>
        </el-col>
        <el-col :span="2" class="fRight">
          <el-button type="primary" plain>导出excel</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <div class="boderSet Table">
        <template>
          <el-table :data="borrowData" stripe style="width: 100%">
            <el-table-column
              prop="applyTime"
              label="申请时间"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="facilityName"
              label="借入物品"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="predictReturnTime"
              label="预计归还时间"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="审核状态"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.state == 0" type="success"
                  >已通过</el-tag
                >
                <el-tag
                  v-else-if="scope.row.state == 2 || scope.row.state == 4"
                  type="info"
                  >审核中</el-tag
                >
                <el-tag
                  v-else-if="scope.row.state == 1 || scope.row.state == 3"
                  type="danger"
                  >已拒绝</el-tag
                >
                <el-tag v-else="scope.row.state == 5" type="warning"
                  >已撤回</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <!-- 查询 -->
                <el-button
                  type="info"
                  icon="el-icon-search"
                  @click="queryDetails1(scope.row.id)"
                  circle
                  size="mini"
                ></el-button>
                <!-- 撤回 -->
                <el-button
                  v-if="scope.row.state == 2 || scope.row.state == 4"
                  type="danger"
                  @click="
                    withdrawAnApplication(scope.row.id, scope.row.facilityName)
                  "
                  size="mini"
                  >撤回申请</el-button
                >
                <el-button
                  v-show="
                    scope.row.state == 0 ||
                    scope.row.state == 1 ||
                    scope.row.state == 3 ||
                    scope.row.state == 5
                  "
                  type="danger"
                  size="mini"
                  :data-id="scope.row.id"
                  disabled
                  >撤回申请</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

      <!-- 分页 -->
      <div class="fRight">
        <el-footer>
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="pageChange"
            :current-page="page"
            :page-size="limit"
            :total="count"
            pager-count="6"
          >
          </el-pagination>
        </el-footer>
      </div>

      <!-- 详细信息弹出框 -->
      <el-dialog title="借入申请详情" :visible.sync="loanApplicationDetails1">
        <div>
          <el-col :span="6">
            <span>{{ this.queryData.dataSubmissionTime }}</span>
          </el-col>
          <el-col :span="12">
            <span>{{ this.queryData.dataName }}</span>
          </el-col>
        </div>
        <div>
          <el-table :data="borrowSuData">
            <el-table-column
              property=""
              label="分类"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="名称"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="编码"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="单价"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="可用数量"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="规格"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="存放地点"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="是否唯一"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="入库时间"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              property=""
              label="借入数量"
              header-align="center"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <el-col :span="12">
          <div class="grid-content bg-purple-light paddingTop30">
            预计归还时间：<span>2017-11-26</span>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="paddingTop30">备注：用于举办的全效活动</div>
        </el-col>
        <el-col :span="24">
          <div class="paddingTop30">
            <el-steps
              :space="200"
              :active="stepsActive"
              :finish-status="finishStatus"
              :process-status="processStatus"
            >
              <el-step title="已发起申请"></el-step>
              <el-step title="审核进行中"></el-step>
              <el-step title="审核已通过"></el-step>
            </el-steps>
          </div>
        </el-col>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeQuery">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Serive from "../../serive/ApprovalOfBteSerive";
import axios from "../../utils/axios";
export default {
  data() {
    return {
      dialogFormVisible1: false,
      loanApplicationDetails1: false,

      form: [
        {
          //拒绝
          id: "",
          case: "",
          name: "",
          state: "",
        },
      ],

      formLabelWidth: "120px",

      //输入框
      input: "",
      //搜索时间框
      searchTime: "",

      borrowData: [], //借入数据
      borrowSuData: [],

      //页码
      limit: 10,
      page: 1,

      finishStatus: "process", //结束步骤条状态
      processStatus: "process", //当前步骤条状态
      stepsActive: "", //步骤条进度
      astate: "", //审批状态
      show: false,

      pass: false,
      notPass: false,
      underReview: false,
      count: 0,
      //搜索数据
      searchData: [
        {
          searchName: "",
        },
      ],
      //查看详情表
      queryData: [
        {
          //提交时间
          dataSubmissionTime: "",
          //申请人
          dataName: "",
          //申请时间
          dataApplicationTime: "",
          //审核状态
          dataState: "",
        },
      ],
    };
  },
  methods: {
    //分页
    //显示当前页码
    pageChange(newPage) {
      this.page = newPage;
      // console.log('当前页码：', newPage);
      this.switchHowerApplication();
    },

    //渲染设备数据
    switchHowerApplication() {
      let limit = this.limit;
      let page = this.page;
      let name = this.input;
      let id = this.aoId;
      // console.log(name);
      Serive.applicantFacilityPage(id, limit, page, name).then((res) => {
        //借入数据
        // console.log(res.data);
        this.borrowData = res.data.data;
        // console.log(res.data.data);
        this.count = res.data.count;
        // console.log(res.data.data);
      });
    },

    //判断步骤条状态
    checkStepBarStatus(state) {
      // finishStatus: "process",//步骤条状态
      // stepsActive:"",//步骤条进度
      //wait / process / finish / error / success
      if (state == 0) {
        this.finishStatus = "success";
        this.stepsActive = 3;
        this.processStatus = "success";
      } else if (state == 2 || state == 4) {
        this.finishStatus = "success";
        this.stepsActive = 1;
        this.processStatus = "process";
      } else if (state == 1 || state == 3) {
        this.finishStatus = "error";
        this.stepsActive = 3;
      } else {
        this.finishStatus = "wait";
        this.stepsActive = -1;
      }
      // console.log(this.queryData.dataSubmissionTime);
      // console.log(this.queryData);
    },
    //查询数据
    queryDetails1(id) {
      //详情模态框显示
      this.loanApplicationDetails1 = true;
      // console.log(this.borrowData[0].id)
      for (let i in this.borrowData) {
        if (borrowData[i].id == id) {
          // console.log(this.borrowData[i]);
          this.borrowSuData.push(borrowData[i]);
          this.queryData.dataSubmissionTime = this.borrowSuData[0].applyTime;
          this.queryData.dataName = this.borrowSuData[0].facilityName;
          this.queryData.dataApplicationTime =
            this.borrowSuData[0].predictReturnTime;
          this.queryData.dataState = this.borrowSuData[0].state;
          this.checkStepBarStatus(this.queryData.dataState);
          return;
        }
      }
    },

    //撤回申请
    withdrawAnApplication(id, name) {
      this.$confirm(`是否撤回 ${name} 的申请?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          Serive.applicantFacilityDelete(id).then((res) => {
            console.log(res);
            this.switchHowerApplication();
          });
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    //查看详情模态框确认
    closeQuery() {
      this.loanApplicationDetails1 = false;
      this.borrowSuData = [];
      // this.switchHowerApplication()
    },
  },
  computed: {
    aoId() {
      return localStorage.getItem("rid");
    },
  },
  created() {
    //加载时创建
    this.switchHowerApplication();
  },
  mounted: {},
};
</script>
<style scoped>
.theBox {
  overflow-y: auto;
  /* height: 600px; */
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
}

.contener {
  margin: 20px 30px;
  padding: 30px 30px 0;
  overflow: hidden;
}

.boderSet {
  border-radius: 10px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.Table {
  margin: 20px 0;
  margin-bottom: 20px;
  background-color: white;
  padding: 5px;
}

.yuanjiao {
  background-color: white;
  padding: 30px;
}

.paddingTop30 {
  padding-top: 30px;
}

.paddingTop15 {
  padding-top: 15px;
}

.fRight {
  float: right;
}

.crumbs {
  margin: 10px 30px;
}

a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

.link{
    color: white;
}
.fen {
  margin: 0 0 15px 0;
}
</style>
  
  
  
  
  